let pageTag = {
    first: '首页',
    prev: '上一页',
    list: null,
    next: '下一页',
    last: '末页',
};
let pageInfo = {
    pageNum:  2,    
    pageSize: 10,    
    totalData: 1000, 
    totalPage: 100,  
}
pageInfo.totalPage = Math.ceil(pageInfo.totalData / pageInfo.pageSize)

var divObj = document.querySelector('div')
divObj.style.display = 'flex'
divObj.style.justifyContent = 'center'
divObj.style.alignItems = 'center'
divObj.addEventListener('click', function(e) {
    var e = e || window.event
    var targetObj  = e.target || e.srcElement
    var targetContent  = targetObj.innerText
    if (targetObj.nodeName == 'P' && targetContent == pageTag.first) {
        pageInfo.pageNum = 1
        showPageTag() 
    }

    if (
        targetObj.nodeName == 'P' 
        && targetContent == pageTag.prev
        && pageInfo.pageNum != 1
    ) {
        pageInfo.pageNum -= 1
        showPageTag() 
    }
    if (targetObj.nodeName == 'P' && parseInt(targetObj.innerText) > 0)
    {
        pageInfo.pageNum = parseInt(targetObj.innerText)
        showPageTag() 
    }

    if (
        targetObj.nodeName == 'P' 
        && targetContent == pageTag.next
        && pageInfo.pageNum != pageInfo.totalPage
    ) {
        pageInfo.pageNum += 1
        showPageTag() 
    }
    if (targetObj.nodeName == 'P' && targetContent == pageTag.last) {
        pageInfo.pageNum = pageInfo.totalPage
        showPageTag() 
    }
})

showPageTag() 
function showPageTag() 
{
    divObj.innerHTML = null
    for (var attr in pageTag) {
        var pObj = document.createElement('p')

        if (attr == 'list') {
            pageTag.list = pObj
        } else {
            var textObj = document.createTextNode(pageTag[attr])
            pObj.appendChild(textObj)
            pObj.style.border = 'solid 1px black'
            pObj.style.margin = '0 5px'
            pObj.style.padding = '0 5px'
        }
        divObj.appendChild(pObj)
    }
    var divPTagObjs = divObj.querySelectorAll('p')
    if (pageInfo.pageNum == 1) {
        divPTagObjs[0].style.background = '#ccc'
        divPTagObjs[1].style.background = '#ccc'
    }
    if (pageInfo.pageNum == pageInfo.totalPage) {
        divPTagObjs[3].style.background = '#ccc'
        divPTagObjs[4].style.background = '#ccc'
    }
    showPageNum()
}

// 显示分页页码
function showPageNum()
{
    pageTag.list.style.display = 'flex'
    pageTag.list.style.justifyContent = 'center'
    pageTag.list.style.alignItems = 'center'
    if (pageInfo.totalPage <= 10) {
        for (var j=1; j<=pageInfo.totalPage; j++) {
            createP(j)
        }
    } else {
        if (pageInfo.pageNum <  5) {
            for (var j=1; j<=5; j++) createP(j)
            createP('...', 'span')
            createP(pageInfo.totalPage - 1)
            createP(pageInfo.totalPage)
        } else if (pageInfo.pageNum == 5) {
            for (var j=1; j<=7; j++) createP(j)
            createP('...', 'span')
            createP(pageInfo.totalPage - 1)
            createP(pageInfo.totalPage)
        } else if (pageInfo.pageNum >  5 && pageInfo.pageNum < pageInfo.totalPage - 4) {
            createP(1)
            createP(2)
            createP('...', 'span')
            for (var j = pageInfo.pageNum - 2; j <= pageInfo.pageNum+2; j++) {
                createP(j)
            }
            createP('...', 'span')
            createP(pageInfo.totalPage - 1)
            createP(pageInfo.totalPage)
        } else if (pageInfo.pageNum >= pageInfo.totalPage - 4) {
            createP(1)
            createP(2)
            createP('...', 'span')
            for (var j = pageInfo.totalPage - 4; j <= pageInfo.totalPage; j++) {
                createP(j)
            }
        }
    }
}

function createP(i, tag = 'p') {
    var pObj = document.createElement(tag)
    var textObj = document.createTextNode(i)
    pObj.appendChild(textObj)
    if (tag != 'span') {
        pObj.style.border = 'solid 1px black'
        pObj.style.margin = '0 5px'
        pObj.style.padding = '0 5px'
    }
    if (i == pageInfo.pageNum) pObj.style.background = 'orange'
    pageTag.list.appendChild(pObj)
}